<template>
  <a-modal :width="400" :title="title" v-model="visible" :maskClosable="false" :confirmLoading="loading" @ok="onSubmit" @cancel="() => (visible = false)" centered>
    <a-spin :delay="100" :spinning="loading">
      <a-form-model ref="sjhtform" :model="form" :rules="rules" :labelCol="lcol" :wrapperCol="wcol" @submit="onSubmit" @submit.native.prevent>
        <a-form-model-item label="充值方式" prop="mode">
          <a-select v-model="form.mode" placeholder="请选择充值方式" style="width: 100%">
            <a-select-option key="微信支付">微信支付</a-select-option>
            <a-select-option key="支付宝支付">支付宝支付</a-select-option>
            <a-select-option key="现金支付">现金支付</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="充值金额" prop="price">
          <a-input-number v-model="form.price" :min="0" :max="100000" placeholder="请输入充值金额" style="width: 100%" />
        </a-form-model-item>
        <input type="submit" v-show="false" />
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import { form } from '@/utils/mixins'
import regexp from '@/utils/validate'
import { Recharge } from '@/api/user'
export default {
  name: 'RechargeForm', //充值表单
  mixins: [form],
  data() {
    return {
      rules: {
        mode: [{ required: true, message: '请选择充值方式', trigger: 'blur' }],
        price: [
          { required: true, message: '请输入充值金额', trigger: 'blur' },
          { pattern: regexp.numn, message: '请输入正确的金额', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开新建窗口
    open(rec) {
      this.visible = true
      if (this.loading) return
      this.reset()
      this.title = `给【${rec.name}】充值`
      this.form = { userId: rec.id, mode: '微信支付' }
    },
    // 点击确定
    onSubmit(e) {
      e.preventDefault()
      this.$refs.sjhtform.validate(valid => {
        if (!valid) return false
        this.loading = true
        this.submit(Recharge, this.form)
      })
    }
  }
}
</script>